<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>编缉</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
</head>
<body class="bg-gray">
<!--<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        编缉
    </h1>


</header>-->
<div id="myinfo">


    <section class="" id="amz-main" data-tag="css-nav">
        <div class="box am-margin-top-sm bg-white am-padding-top-sm am-padding-bottom-sm am-padding-right-sm  prelative">

            <div class="box-1  am-padding-left-sm   am-padding-top-ss" v-on:click="show(staffInfo.head_icon)">
                <div class="prelative margin-top-15">头像</div>
            </div>
            <div class=" ">
                <i class="my-pic"><img onclick="$('.fileupload').click()" v-bind:src="staffInfo.head_icon"
                                       class="am-circle width-70px"></i>
                <div style="display: none">
                    <form id="uploadForm" enctype="multipart/form-data">
                        <input class="fileupload" name="editormd-image-file" type="file" onchange="uploadPic(this)">
                    </form>
                </div>
            </div>
        </div>

        <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">

            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">姓名</div>
                <div class=" font-color-1">
                    <input class="am-input am-text-right" v-model="staffInfo.name" v-bind:value="staffInfo.name">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">部门</div>
                <div class=" font-color-1">
                    <input class="am-input am-text-right" v-model="staffInfo.department_name"
                           v-bind:value="staffInfo.department_id">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">职称</div>
                <div class=" font-color-1">
                    <input class="am-input am-text-right" v-model="staffInfo.station" v-bind:value="staffInfo.station">
                </div>
            </div>

        </div>

        <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">

            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">个性签名</div>
                <div class=" font-color-1">
                    <textarea class="am-input3 am-text-right" placeholder="请输入" v-model="staffInfo.signature"
                              v-bind:value="staffInfo.signature">

                    </textarea>
                    <text>
                </div>
            </div>

        </div>

        <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">


            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">手机号</div>
                <div class=" font-color-1">
                    <input id="shouji" class="am-input am-text-right" v-model="staffInfo.phone" v-bind:value="staffInfo.mobile">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">邮箱</div>
                <div class=" font-color-1">
                    <input id="youxiang" class="am-input am-text-right" v-model="staffInfo.mail" v-bind:value="staffInfo.mail">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">微信</div>
                <div class=" font-color-1">
                    <input class="am-input am-text-right" v-model="staffInfo.weixin" v-bind:value="staffInfo.weixin">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">座机</div>
                <div class=" font-color-1">
                    <input id="zuoji" class="am-input am-text-right" v-model="staffInfo.mobile" v-bind:value="staffInfo.phone">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">地址</div>
                <div class=" font-color-1">
                    <input class="am-input am-text-right" v-model="staffInfo.address" v-bind:value="staffInfo.address">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">个人图片</div>
                <div class=" font-color-1">
                    <img class="list-img " src="../assets/images/icons/add-img.png" style="height: 30px;"
                         onclick="$('.fileupload2').click()">
                </div>
            </div>
            <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
                <div class=" font-color-1">
                    <div v-for="(intro,index) in staffInfo.rspStaffIntro">
                        <img class="am-input2 am-text-right" v-bind:src="intro.url" v-on:click="remove(index)">
                    </div>
                </div>
            </div>

            <form id="uploadForm2" enctype="multipart/form-data">

                <input style="display: none" class="fileupload2" name="editormd-image-file"
                       type="file" onchange="uploadPic2(this)">
            </form>


        </div>


    </section>

    <footer data-am-widget="navbar"
            class="am-navbar am-cf border-0 am-navbar-default am-padding-right-sm am-padding-left-sm">
        <div class="btn-88" v-on:click="save">保存</div>
    </footer>

</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/common.js"></script>
<link rel="stylesheet" href="../assets/js/layui/css/layui.css">
<script type='text/javascript' src='../assets/js/layui/layui.js'></script>
<script>
    $(".tab-container .tab-items").on("click", function () {
        $(".tab-container .tab-items").removeClass("cur");
        $(this).addClass("cur");
    })
</script>
<script>
    var mask;
    var recount = 0;//刷新次数
    layui.use('layer', function () {
        var layer = layui.layer;
    });
    var sessionid = getQueryString("sessionid");
    var vues = new Vue();
    /*    function save(){
     alert('保存')
     }*/
    layui.use('layer', function () {
        var layer = layui.layer;
    });
    $(function () {
        setTimeout(function () {
            mask = layer.msg('正在加载', {icon: 16});
            $.ajax({
                type: 'get',
                url: baseUrl + 'v3.0/cardDetail',
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                success: function (result) {
                    layer.close(mask);
                    if (result.head_icon=='')
                    {
                        result.head_icon='https://keji-res.h5h5h5.cn/img9de91e6efbb8470fa0a01cacc1cdda838.png'
                    }
                    //注册vue
                    vues = new Vue({
                        el: "#myinfo",
                        data: {
                            staffInfo: result
                        },
                        methods: {
                            edit: function () {
                                window.location.href = '编缉.html?userid=' + userid
                            },
                            show: function (url) {
                                window.location.href = url
                            },
                            mycard: function () {
                                window.location.href = '我的名片.html?userid=' + userid
                            },
                            myproduct: function () {
                                window.location.href = '我的产品.html?userid=' + userid
                            },
                            remove: function (idx) {
                                var r = confirm("确定移除？")
                                if (r) {
                                    this.staffInfo.rspStaffIntro.splice(idx, 1);
                                }

                            },
                            save: function () {

                                if (!checkMobile(this.staffInfo.phone)&&(this.staffInfo.phone!=null)&&(this.staffInfo.phone!="")) {
                                    mask = layer.msg('手机号码不正确', {icon: 2});
                                    $("#shouji").focus();
                                    setTimeout(function () {
                                        layer.close(mask);
                                    }, 1500)
                                } else if (!checkEmail(this.staffInfo.mail)&&(this.staffInfo.mail!=null)&&(this.staffInfo.mail!="")) {
                                    mask = layer.msg('邮箱不正确', {icon: 2});
                                    $("#youxiang").focus();
                                    setTimeout(function () {
                                        layer.close(mask);
                                    }, 1500)
                                } else if(!checkphone(this.staffInfo.mobile)&&(this.staffInfo.mobile!=null)&&(this.staffInfo.mobile!="")) {
                                    mask = layer.msg('座机不正确', {icon: 2});
                                    $("#zuoji").focus();
                                    setTimeout(function () {
                                        layer.close(mask);
                                    }, 1500)
                                } else {
                                    mask = layer.msg('正在保存', {icon: 16});
                                    console.log(this.staffInfo);
                                    $.ajax({
                                        type: 'PUT',
                                        url: baseUrl + 'v3.0/editCard',
                                        headers: {'session_id': sessionid},
                                        data: JSON.stringify(this.staffInfo),
                                        contentType: 'application/json',
                                        success: function (result) {
                                            layer.close(mask);
                                            //修改成功后返回并刷新 --刷新貌似有问题
                                            mask = layer.msg('保存成功', {icon: 1});
                                            setTimeout(function () {
                                                layer.close(mask);
                                            }, 1000)
                                            //javascript:history.go(-1);
                                            //location.reload();
                                        }
                                    });
                                }


                            }

                        }


                    })
                }
            });
        }, 200)
        //获取用户信息

    })

    //上传头像
    function uploadPic(that) {
        var formData = new FormData($('#uploadForm')[0]);
        mask = layer.msg('正在上传图片', {icon: 16});
        $.ajax({
            type: 'post',
            url: baseUrl + "v1.0/upload",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            dataType: "json",
            field: 'editormd-image-file',
            success: function (d) {
                vues.staffInfo.head_icon = d.url;
                layer.close(mask);
            }
        })
    }
    //上传图片介绍
    function uploadPic2(that) {
        var formData = new FormData($('#uploadForm2')[0]);
        mask = layer.msg('正在上传图片', {icon: 16});
        $.ajax({
            type: 'post',
            url: baseUrl + "v1.0/upload",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            dataType: "json",
            field: 'editormd-image-file',
            success: function (d) {
                vues.staffInfo.rspStaffIntro.push({
                    url: d.url,
                    type: '1'
                });

                setTimeout(function () {
                    layer.close(mask);
                }, 1000)
            }
        })
    }


    function checkMobile(str) {
        var
            re = /^1\d{10}$/
        if (re.test(str)) {
            return true
        } else {
            return false
        }
    }

    function checkEmail(str) {
        var filter = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if (filter.test(str)) return true;
        else {
            return false;
        }
    }

    function checkphone(str){
        var filter = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
        if (filter.test(str)) return true;
        else {
            return false;
        }
    }


</script>

</body>
</html>